import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
    ScrollView,
    Image
} from 'react-native';


export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to 后盾人 React Native!
        </Text>

        <ScrollView
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            onScroll={()=>{console.log('滚动啦！');}}
            style={styles.sview}
            contentContainerStyle={styles.sviewin}
        >
            <Text style={styles.word}>首页</Text>
            <Text style={styles.word}>体育</Text>
            <Text style={styles.word}>热点</Text>
            <Text style={styles.word}>娱乐</Text>
            <Text style={styles.word}>军事</Text>
            <Text style={styles.word}>军事</Text>
            <Text style={styles.word}>军事</Text>
            <Text style={styles.word}>军事</Text>
            <Text style={styles.word}>军事</Text>
            <Text style={styles.word}>军事</Text>
            <Text style={styles.word}>军事</Text>
        </ScrollView>


      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    // justifyContent: 'center',
    // alignItems: 'center',
    // backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
    word:{
    fontSize:20,
        color:'rgba(0,0,0,0.6)',
        paddingLeft:20,
        paddingRight:20,

    },
    sview:{
      // borderWidth:2,
      //   borderColor:'blue',
      //   borderStyle:'solid',
        height: 70,

    },
    sviewin:{
        // 定义子元素在主轴上的方向
        // justifyContent:'center',
        alignItems:'center',
        // backgroundColor:'red'
    }

});
